Este es mi código:
export default function Nav() { const { userLogin } = useUser() console.log(userLogin) return ( <nav className={styles.nav}> {!userLogin ? ( <Link href={"/login"}><a className={`${styles.top}`}></a></Link> ) : ( <Link href={"/profile"}><a className={`${styles.userLogged}`}></a></Link> )} </nav> ) } Y este es useUser :
export default function useUser(){ var userLogin = false const cookies = parseCookies() if (cookies.token) { userLogin = true } return { userLogin } } Entonces, si userLogin es false , todo está bien.
Pero si userLogin es true , aparece este error:
Warning: Prop `className` did not match. Server: "x" Client: "y"Este error se muestra cuando uso cookies.
No quiero usar next/dynamic . porque el componente de recarga dynamic vuelve a hacer clic.
Si parseCookies ocurre solo en el lado del cliente, es decir, usa el document , luego tendrá un HTML diferente del cliente, esto me sucede con localStorage porque estoy usando window .
Pero debido a que está utilizando cookies, puede obtenerlas del argumento req de getInitialProps:
App.getInitialProps = async ({ ctx }) => { const { req } = ctx; const cookies = parseCookies(req ? req.headers.cookie : document.cookie); return { pageProps: { cookies } }; }; Si está utilizando nookies , tienen una integración genial con Next.js que le permite pasar ctx como primer argumento de la siguiente manera: const cookies = parseCookies(ctx) y ctx provendrá de getInitialProps o getServerSideProps